.movie-item {
  position: relative;
  display: flex;
  margin: 0 30rpx;
  padding: 16rpx 0;
  background-color: #fff;

  .movie-item__poster {
    position: relative;
    flex-shrink: 0;
    width: 164rpx;
    height: 220rpx;
    overflow: hidden;
    border-radius: 6rpx;

    .poster {
      width: 100%;
      height: 100%;
      background-color: rgba(#f5f5f5, 0.45);
    }
  }

  .movie-item__content {
    flex: 1;
    margin-left: 24rpx;

    .movie__title-wrap {
      display: flex;
      align-items: center;
      height: 44rpx;
      line-height: 44rpx;

      .movie__title {
        font-size: 32rpx;
        color: #333;
        flex: 1;
        flex-shrink: 0;
        width: 0;

        .title {
          width: 420rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .keyword {
          color: #e54847;
        }
      }

      .movie__rating {
        width: 120rpx;
        text-align: right;
        font-size: 28rpx;
        color: #feb300;
        text-align: right;

        &.is-third {
          color: #f16c00;
        }

        .rating__value {
          font-size: 28rpx;
          font-weight: bold;
        }

        .rating__label {
          font-size: 20rpx;
          padding: 0 4rpx;
        }
      }
    }

    .movie-item__info {
      padding-top: 12rpx;
      height: 46rpx;
      font-size: 24rpx;
      color: #999;

      &.wish-count {
        .wish-count {
          color: var(--color-theme);
          font-size: 28rpx;
        }
      }

      .category-tag {
        display: inline-block;
        margin-right: 8rpx;
        padding: 0 6rpx;
        height: 28rpx;
        line-height: 28rpx;
        border-radius: 4rpx;
        font-size: 12rPX;
        color: #feb300;
        background-color: rgba(#feb300, 0.15);

        &::before {
          border-color: #feb300;
        }
      }
    }
  }

  .sort {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    line-height: 40rpx;
    width: 30rpx;
    text-align: center;

    .sort-bg {
      position: absolute;
      left: -50rpx;
      top: 0;
      width: 120rpx;
      height: 40rpx;
      transform: rotate(-45deg);
      background: #adadad;
      text-align: center;
      z-index: -1;

      &.sort-1 {
        background: #ff0000;
      }

      &.sort-2 {
        background: #ff4500;
      }

      &.sort-3 {
        background: #f4a460;
      }
    }

    .sort-value {
      color: #fff;
      font-size: 22rpx;
    }
  }
}